<!DOCTYPE html>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="lib/jquery.js"></script>
    <script src="lib/angular.js"></script>
    <script src="lib/angular-ui-router.js"></script>
    <script src="lib/bootstrap.js"></script>
    <link rel="stylesheet" href="lib/bootstrap.css"/>
</head>
<body>

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" >
    <div class="container-fluid">
        <div class="navbar-header" style="margin-left: 50px">
            <a class="navbar-brand" ui-sref="home">首页</a>
            <a class="navbar-brand" ui-sref="user">用户</a>
            <a class="navbar-brand" ui-sref="system">系统</a>

        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <ul style="float: right;margin-top: 15px;margin-right: 50px;list-style: none;">
                <li class="dropdown">
                   <span class="glyphicon glyphicon-user" aria-hidden="true"></span>

                    <a style="color: #999;text-decoration: none" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                       aria-haspopup="true" aria-expanded="false">admin <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>

        </div>
    </div>
</nav>
<div ui-view></div>
</body>
</html>
<script>
    $(function(){
        var app = angular.module('thl',['ui.router']);
        app.run(function($rootScope,$state,$stateParams){
            $rootScope.$state = $state;
            $rootScope.$stateParams = $stateParams;
        });
        app.config(['$stateProvider','$urlRouterProvider',
        function($stateProvider,$urlRouterProvider){
            $urlRouterProvider.otherwise('/home');
            $urlRouterProvider.when('/user','/user/info').when('/system','/system/set').otherwise('home');
            $stateProvider
                    .state('home',{
                        url:'/home',
                        template:'home',
                        controller:'homeController',
                        views:{
                            '':{
//
                                templateUrl:"tpls/first.html"
//
                            }

                        }
                    })
//
                    .state('user',{
                        url:'/user',

                        views:{
                            '':{
//
//                                template:"<div style='width: 210px;height: 300px;margin-left: 50px;margin-top: 70px'>"
//                                +" <div class='list-group' style='width: 200px;height:100%;'>" +
//                                " <a href='#' class='list-group-item ' style='color: #428BCB;'>'用户管理 </a>"
//                                +"<a ui-sref='user.tab1' href='#' class='list-group-item' style='padding-left: 35px;color:#428BCB; '>用户信息</a>"
//                                +"<a ui-sref='user.tab2' href='#' class='list-group-item' style='padding-left: 35px;color:#428BCB; '>扩展资料</a>"
//                                +"<a href='#' class='list-group-item ' style='color:#428BCB; '>权限管理 </a>"
//                                +"<a ui-sref='user.tab3' href='#' class='list-group-item' style='padding-left: 35px;color:#428BCB; '>用户组管理</a>"
//                                +" <a ui-sref='user.tab4' href='#' class='list-group-item' style='padding-left: 35px;color:#428BCB; '>后台菜单管理</a></div></div>"
//                                +"<div style='width: 600px;height: 250px;border: solid 1px #ccc;margin-top: -300px;margin-left: 300px' ui-view=''></div></div></div>"
//
                                templateUrl:'tpls/user.html'

                            }

                        }
                    })
                    .state('user.info',{
                        url:'/info',
                        views:{
                            '':{
//                                template:"<div style='width: 100%;height: 50px;background: #f5f5f5;border-bottom: solid 1px #ccc'>" +
//                                "<button style='width: 90px;height: 30px;background:#428BCB ;margin-top: 10px;margin-left: 10px;color: #ffffff'>新增用户</button></div>"
//                                +"<div style='width: 90%;height: 40px;background: #f5f5f5;margin: 0 auto;border-top: solid 1px #ccc;border-bottom: solid 1px #ccc;margin-top: 10px'>" +
//                                "<span style='line-height: 40px;margin-left: 10px;font-weight: 600'>标题</span>" +
//                                "<span style='margin-left: 300px;font-weight: 600'>操作</span></div>"
//                                +"<p style='margin-left: 40px;float: left'>Tian</p>"
//                                +"<div style='width: 150px;height: 25px;background: red;margin-left: 310px;color: #ffffff'>" +
//                                "<button style='width: 33%;height: 25px;background: #428BCB;color: #ffffff'>详情</button>" +
//                                "<button style='width: 33%;height: 25px;background: #49BDDD;color: #ffffff'>修改</button>" +
//                                "<button style='width: 33%;height: 25px;background: #D9524D;color: #ffffff'>删除</button></div>"
//                                templateUrl:'tpls/user1.html'
                                templateUrl:''
                            },
                            'main':{
                                templateUrl:'tpls/user-info.html'
                            },
                            'info@user.info':{
                                templateUrl:'tpls/list.html'
                            }
                        }
                    })
                    .state('user.info.add',{
                        url:'/add',
                        views:{
                            '':{
                                templateUrl:''
                            },
                            'info':{
                                templateUrl:'tpls/add.html'
                            }
                        }
                    })
                    .state('user.info.edit',{
                        url:'/edit',
                        views:{
                            '':{
                                templateUrl:''
                            },
                            'info':{
                                templateUrl:'tpls/edit.html'
                            }
                        }
                    })
                    .state('user.info.show',{
                        url:'/show',
                        views:{
                            templateUrl:''
                        },
                        'info':{
                            templateUrl:'tpls/show.html'
                        }
                    })
                    .state('user.extend',{
                        url:'/extend',
                        views:{
                            '':{
                                templateUrl:''
                            },
                            'main':{
                                templateUrl:'tpls/user-extend.html'
                            }
                        }
                    })
                    .state('user.group',{
                        url:'/group',
                        views:{
                            '':{
                                templateUrl:''
                            },
                            'main':{
                                templateUrl:'tpls/user-group.html'
                            }
                        }
                    })
                    .state('user.menus',{
                        url:'/menus',
                        views:{
                            '':{
                                templateUrl:''
                            },
                            'main':{
                                templateUrl:'tpls/user-menus.html'
                            }
                        }
                    })
//                    .state('user.tab2',{
//                        url:'/tab2',
//                        views:{
//                            '':{
//                                template:"用户扩展信息的设置</div>"
//                            }
//
//                        }
//                    })
//                    .state('user.tab3',{
//                        url:'/tab3',
//                        views:{
//                            '':{
//                                template:"用户分组的设置"
//                            }
//                        }
//
//                    })
//                    .state('user.tab4',{
//                        url:'/tab4',
//                        views:{
//                            '':{
//                                template:"后台菜单的设置"
//                            }
//                        }
//
//                    })
                    .state('system',{
                        url:'/system',
                        template:'system',

                        views:{
                            '':{
                                templateUrl:'tpls/system.html'
                            }

                        }
                    })

        }]);
        angular.bootstrap(document,['thl']);
    })
</script>
